<template>
  <div class="block">
    <div class="personalcenter">
      <div class="personalcenter_ifon">
        <div class="ifon_body_head">
          <img src="@/assets/images/bg.jpg" alt="" />
          <div class="ifon_body_head_name">{{ name }}</div>
          <div style="font-size: 14px">{{ userInfo.briefIntroduction }}</div>
        </div>
        <ul class="ifon_body_title">
          <li><i class="el-icon-reading"></i>{{ userInfo.duties }}</li>
          <li><i class="el-icon-cpu"></i>{{ userInfo.workUnit }}</li>
          <li><i class="el-icon-house"></i>{{ address }}</li>
        </ul>
        <div class="ifon_body_label">
          <h4>标签</h4>
          <el-tag
            :key="i"
            v-for="(tag, i) in dynamicTags"
            :disable-transitions="false"
            closable
            @close="handleClose(tag)"
            size="small"
          >
            {{ tag.tagName }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="mini"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            >+
          </el-button>
        </div>
        <div class="ifon_body_team">
          <h4>团队</h4>
          <ul>
            <li v-for="(item, i) in userGroupTag" :key="i">
              <span> <svg-icon icon-class="weibo" /> </span>
              {{ item.tagName }}
            </li>
          </ul>
        </div>
      </div>
      <div class="personalcenter_content">
        <el-tabs v-model="activeName">
          <el-tab-pane label="产品" name="first">
            <!-- <product /> -->
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
// import product from "@/views/controlboard/product/index";
import { getPersonalTag, addTag, removeTag, getUserGroup } from "@/service/tag";
export default {
  name: "personalcenter",
  components: {
    // product,
  },
  data() {
    return {
      activeName: "first",
      dynamicTags: [], //标签
      inputVisible: false,
      inputValue: "",
      userGroupTag: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo", "name"]),
    address() {
      if (this.userInfo.address) {
        return this.userInfo.address
          .split("-")[0]
          .concat(this.userInfo.address.split("-")[1]);
      }
    },
  },
  methods: {
    //删除标签
    handleClose(tag) {
      removeTag({
        recordId: tag.recordId,
      }).then((res) => {
        console.log(res);
        this.getTagList();
      });
    },

    //显示输入框
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    // 添加标签
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        addTag({
          tagName: inputValue,
          tagType: 3,
        }).then((res) => {
          console.log(res);
          this.getTagList();
        });
        // this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    //获取个人标签
    getTagList() {
      getPersonalTag().then((res) => {
        this.dynamicTags = res.data.items;
      });
    },
  },
  created() {
    this.getTagList();
    getUserGroup().then((res) => {
      this.userGroupTag = res.data.items;
    });
  },
  mounted() {},
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.block {
  width: 100%;
  height: calc(100vh - 84px);
  padding: 20px;
  background-color: #f3f3f3;
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .personalcenter {
    display: flex;
    justify-content: space-between;
    width: 100%;
    // height: 100%;
    h4 {
      padding: 0;
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 10px;
    }
    .personalcenter_ifon {
      padding: 20px;
      width: 26%;
      height: 100%;
      background: #fff;
      border-right: 8px;

      .ifon_body_head {
        margin-bottom: 24px;
        text-align: center;
        img {
          width: 104px;
          height: 104px;
          border-radius: 50%;
          margin-bottom: 20px;
        }
        .ifon_body_head_name {
          margin-bottom: 4px;
          color: rgba(0, 0, 0, 0.85);
          font-weight: 500;
          font-size: 20px;
          line-height: 28px;
        }
      }
      .ifon_body_title {
        margin-bottom: 20px;
        li {
          margin: 0 0 5px 15px;
          font-size: 14px;
          line-height: 20px;
          color: rgba(0, 0, 0, 0.85);
          i {
            margin-right: 5px;
          }
        }
      }
      .ifon_body_label {
        padding: 30px 0;
        border-top: 1px dashed #eee;
        border-bottom: 1px dashed #eee;
        margin-bottom: 20px;
        .el-tag {
          margin-right: 10px;
          margin-bottom: 10px;
        }
        .button-new-tag {
          margin-right: 10px;
          height: 26px;
          line-height: 26px;
          padding-top: 0;
          padding-bottom: 0;
        }
        .input-new-tag {
          width: 80px;
          margin-right: 10px;
        }
      }
      .ifon_body_team {
        width: 100%;
        ul {
          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          li {
            display: flex;
            align-items: center;
            width: 46%;
            font-size: 14px;
            word-wrap: normal; /* for IE */
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            margin-bottom: 20px;
            span {
              display: inline-block;
              font-size: 26px;
              line-height: 26px;
              border-radius: 50%;
              margin-right: 10px;
            }
          }
        }
      }
    }

    .personalcenter_content {
      width: 72%;
      // height: 100%;
      background: #fff;
      /deep/ .el-tabs__content {
        padding: 0 20px;
      }
    }
  }
}
</style>